<template>
    <div class="wrapper">
        <top-header title="商家首页" title-left="退出" @leftClick="signOut"></top-header>
        <slider class="slider" interval="3000" auto-play="true">
            <div v-for="img in bannerList" v-if="img.pic">
                <image class="content_first_img" resize="contain" :src="img.pic"></image>
                <wxc-noticebar class="content_noticebar"  :notice="img.content" ></wxc-noticebar>
            </div>
            <div v-else>
                    <image class="content_img" src="bmlocal://assets/acw/service.png"></image>
            </div>
        </slider>
        <div>
            <text class="list_content_two">店铺名称：{{StoreInfo.storename}}</text>
            <text class="list_content_two">地址：{{StoreInfo.adress}}</text>
            <text class="list_content_two">电话：{{StoreInfo.ownerphone}}</text>
        </div>
        <div class="funWrp">
            <div class="funItemTop" v-if="type != 1" @click="toMaintBuity(1)">
                <text class="iconfontStyle iconfont">&#xe628;</text>
                <text class="content_middle_text">保养维修</text>
            </div>
            <div class="funItemTop" v-if="type != 1" @click="toMaintBuity(2)">
                <text class="iconfontStyle iconfont">&#xe61b;</text>
                <text class="content_middle_text">洗车美容</text>
            </div>
            <div class="funItemTop" v-if="type != 1" @click="toMaintBuity(3)">
                <text class="iconfontStyle iconfont">&#xe61b;</text>
                <text class="content_middle_text">车辆检测</text>
            </div>
            <div class="funItem" v-if="type != 1" @click="toCommdList">
                <text class="iconfontStyle iconfont">&#xe629;</text>
                <text class="content_middle_text">产品管理</text>
            </div>
            <div class="funItem" v-if="type != 2" @click="carManager">
                <text class="iconfontStyle iconfont">&#xe624;</text>
                <text class="content_middle_text">车辆管理</text>
            </div>
            <div class="funItem" v-if="type != 1" @click="toAddCommd">
                <text class="iconfontStyle iconfont">&#xe603;</text>
                <text class="content_middle_text">添加商品</text>
            </div>
            <div class="funItem"v-if="type != 2" @click="addCar">
                <text class="iconfontStyle iconfont">&#xe607;</text>
                <text class="content_middle_text">添加车辆</text>
            </div>
        </div>
    </div>
</template>
<script>
import { wxcNoticebar } from 'weex-ui'
import header from '../../common/header'
//如果 selltype 为 0，则为平台（后台）； 如果 为 1，则为 个人； 如果为 2，则为 商家，
export default {
    mounted() {
    },
    created () {
        let StoreInfo = this.$storage.getSync('StoreInfo')
        this.StoreInfo = StoreInfo
        this.stroeId = StoreInfo.id
        this.type = StoreInfo.type
        this.getBannerList()
    },
    components: { wxcNoticebar, 
    'top-header': header, 
    },
    data() {
        return {
            bannerList: [],
            services: [],
            serviceLength: 0,
            token: '',
            infoObj: {},
            isShowLoad: false,
            stroeId: '',
            type: '',
            StoreInfo: {},
        }
    },
    methods: {
        // 查询轮播图
        getBannerList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'banner.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    "position":2,
                    "page": 1,
                    "limit": 5,
                    "sort": 'add_time',
                    "order": 'desc'
                }
            }).then(resData => {
                // 成功回调
                console.log('------------查询轮播图-------------------------', resData)
                if(resData && resData.errno == 0){
                    this.bannerList = resData.data.items
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        // 返回
        back () {
            this.$router.back();
        },
        // 提示
        cantuse () {
            this.$notice.toast({ message: "开发中，敬请期待..."})
        },
        // 跳转维修保养页面
        toMaintBuity (type) {
            this.$router.open({
                name: 'acw.my.merchant.order',
                type: 'PUSH',
                params: type
            });
        },
        // 添加商品
        toAddCommd () {
            this.$router.open({
                name: 'acw.my.merchant.addcommod',
                type: 'PUSH',
            });
        },
        // 商品管理
        toCommdList () {
            this.$router.open({
                name: 'acw.my.merchant.commodlist',
                type: 'PUSH',
            });
        },
        // 添加车辆
        addCar () {
            this.$router.open({
                name: 'acw.sellcar.sellcar',
                type: 'PUSH',
                params: {'stroeId': this.stroeId}
            });
        },
        // 车辆管理
        carManager () {
            this.$router.open({
                name: 'acw.my.merchant.service',
                type: 'PUSH',
            });
        },
        // 退出
        signOut () {
            this.$storage.deleteSync('StoreInfo')
            this.$storage.setSync('StoreLoginStatus', 'false')
            this.back()
        }
    }
}
</script>
<style>
    .iconfont {
        font-family: iconfont;
    }
    .iconfontThisMenu {
        font-size: 60px;
        color: #1E90FF;
    }
    .iconfontMenu {
        font-size: 60px;
        color: #bfbfbf;
    }
    .wrapper {
        background-color: #f4f4f4;
    }
    .list_content{
        flex-direction: row;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .list_content_two{
        padding-top: 10px;
        padding-bottom: 10px;
        color: #fff;
        font-size: 30px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #1E90FF;
    }
    .funWrp {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .funItem {
        width: 375px;
        height: 150px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #515151;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #515151;
        /* background-color: #1E90FF; */
    }
    .funItemTop {
        width: 375px;
        height: 150px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #515151;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #515151;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #515151;
        margin-top: 1px;
        /* background-color: #1E90FF; */
    }
    
    /* .header {
        height: 380px;
    } */
    .tip{
        text-align: center;
        font-size: 36px;
        height: 60px;
        line-height: 60px;
        color: #fff;
    }
    .content_img{
        height: 380px;
        width: 750px;
    }
    .content_middle_text{
        font-size: 36px;
        color: #666;
    }
    .iconfont {
        font-family: iconfont;
    }
    .iconfontStyle {
        font-size: 80px;
        color: #666;;
    }
    .slider{
        height: 460px;
        background-color: #fff;
    }
    .content_first_img{
        height: 400px;
    }
    .content_noticebar{
        height: 60px;
    }

</style>
